<template>
  <div class="p-d">
    <div class="p-d b-f">
      <SearchComp :searchForm="searchForm"
        :searchData="queryString"
        :searchAction="searchAction"></SearchComp>
      <div class="btnStyle flex-between p-t">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <el-table :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        class="m-t"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name"
          label="单位名称"
          width="200">
          <template slot-scope="scope">
            <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;"> {{ scope.row.name }}
              <el-tag v-if="scope.row.isManage"
                type="success">管理单位</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type"
          label="单位类型"
          width="80">
        </el-table-column>
        <el-table-column prop="upName"
          label="上级单位">
        </el-table-column>
        <el-table-column prop="bigName"
          label="所属大单位">
        </el-table-column>
        <el-table-column prop="area"
          label="所在地区"
          width="80">
        </el-table-column>
        <el-table-column prop="address"
          label="通信地址">
        </el-table-column>
        <el-table-column prop="code"
          label="邮政编码"
          width="100">
        </el-table-column>
        <el-table-column prop="people"
          label="联系人姓名"
          width="100">
        </el-table-column>
        <el-table-column prop="phone"
          label="办公电话">
        </el-table-column>
        <el-table-column prop="moblie"
          label="移动电话">
        </el-table-column>
        <el-table-column fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-link v-if="scope.row.isParent"
              :underline="false"
              class="m-l-5"
              @click="addDown"
              type="primary">增加下级单位
            </el-link>
            <div> <el-link :underline="false"
                class="m-l-5"
                @click="editRow(scope.row)"
                type="primary">修改
              </el-link>
              <el-link :underline="false"
                class="m-l-5"
                @click="deleteRow(scope.row)"
                type="danger">删除
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="queryParams.total > 0"
        :total="queryParams.total"
        :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.pageSize"
        @pagination="getPagination" />
    </div>
    <AddComp ref="addRef"
      @close="getList" />
  </div>
</template>

<script>
import AddComp from './common/add.vue'
export default {
  components: { AddComp },
  data() {
    return {
      queryParams: {
        total: 3,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [
        {
          id: 1,
          name: '中国人民解放军东部战区总医院淮安医疗区',
          type: '军队医院',
          upName: '中国人民解放军东部战区联合作战指挥中心',
          bigName: '中国人民解放军东部战区总医院',
          area: '南京市',
          address: '江苏省淮安市清江浦区健康东路100号',
          code: '223001',
          people: '刘涛',
          phone: '025-80860114',
          moblie: '13109827319',
          isManage: true,
          isParent: true,
          children: [
            {
              id: 11,
              name: '司法鉴定所',
              type: '军队医院',
              upName: '中国人民解放军东部战区总医院淮安医疗区',
              bigName: '中国人民解放军东部战区总医院',
              area: '南京市',
              address: '江苏省南京市鼓楼区',
              code: '210093',
              people: '赵强',
              phone: '025-9903095',
              moblie: '13411191110',
              isParent: false,
              isManage: false
            },
            {
              id: 12,
              name: 'PET-CT IGRT中心',
              type: '军队医院',
              upName: '中国人民解放军东部战区总医院淮安医疗区',
              bigName: '中国人民解放军东部战区总医院',
              area: '南京市',
              address: '江苏省淮安市清江浦区健康东路95号',
              code: '223023',
              people: '王雷',
              phone: '025-68560085',
              moblie: '13434399314',
              isParent: false,
              isManage: false
            }
          ]
        },
        {
          id: 2,
          name: '后勤保障技术研究所',
          type: '科研院所',
          upName: '南部战区后勤保障指挥部',
          bigName: '南部战区科研机构',
          area: '重庆市',
          address: '重庆市九龙坡区渝州路79号',
          code: '400000',
          people: '李伟',
          phone: '023-86153956',
          moblie: '18996788723',
          isManage: true,
          isParent: true,
          children: [
            {
              id: 21,
              name: '信息化建设与管理研究室',
              type: '科研院所',
              upName: '南部战区后勤保障指挥部',
              bigName: '南部战区科研机构',
              area: '重庆市',
              address: '重庆市九龙坡区渝州路76号',
              code: '400012',
              people: '周健',
              phone: '023-86153956',
              moblie: '18996788723',
              isParent: false,
              isManage: false
            },
            {
              id: 22,
              name: '医疗卫生保障技术实验室',
              type: '科研院所',
              upName: '南部战区后勤保障指挥部',
              bigName: '南部战区科研机构',
              area: '重庆市',
              address: '重庆市九龙坡区渝州路23号',
              code: '400230',
              people: '王雅婷',
              phone: '023-86158239',
              moblie: '18923894587',
              isParent: false,
              isManage: false
            },
            {
              id: 23,
              name: '能源与装备保障分所',
              type: '科研院所',
              upName: '南部战区后勤保障指挥部',
              bigName: '南部战区科研机构',
              area: '重庆市',
              address: '重庆市九龙坡区渝州路12号',
              code: '400490',
              people: '王雷',
              phone: '023-86129348',
              moblie: '18837260938',
              isParent: false,
              isManage: false
            }
          ]
        }
      ],
      queryString: {
        title: '',
        id: ''
      },
      buttonData: [
        {
          kind: 'button',
          label: '新增',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
            this.$refs.addRef.show({
              title: '新建单位信息',
              isLook: 'add'
            })
          }
        },
        {
          kind: 'button',
          label: '批量删除',
          plain: false,
          size: 'small',
          type: 'danger',
          click: () => {
            // if (this.multipleSelection.length == 0) {
            //   this.$message({
            //     type: 'warning',
            //     message: '请选择要删除的数据'
            //   })
            //   return
            // }
            const ids = []
            // this.multipleSelection.forEach(items => {
            //   ids.push(items.id)
            // })
            this.deleteFun(ids)
          }
        }
      ],
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '单位名称',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '单位类型',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              id: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  methods: {
    getPagination() {},
    addDown() {
      this.$refs.addRef.show({
        title: '新建下级单位信息',
        isLook: 'add'
      })
    },
    editRow(row) {
      this.$refs.addRef.show({
        title: '修改单位信息',
        isLook: 'edit',
        data: row
      })
    },
    deleteFun(row) {
      console.log(
        '%c [ ids ]-216',
        'font-size:13px; background:pink; color:#bf2c9f;',
        row
      )
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>